<template>
  <div class="sortbar mt-3 flex">
    <div class="title font-2 mr-[20px] w-[50px] mt-2">{{ props.title }}:</div>

    <div class="list flex flex-1 flex-wrap">
      <div
        @click="itemClick(-1)"
        class="title hover:text-theme-color font-2 mr-6 cursor-pointer mt-2"
        :class="{ 'text-theme-color': curIndex == -1 }"
      >
        全部
      </div>
      <div
        class="item cursor-pointer hover:text-theme-color font-2 mr-6 mt-2"
        v-for="(item, index) in props.list"
        :key="index"
        @click="itemClick(Number(index), item)"
        :class="{ 'text-theme-color': curIndex == Number(index) }"
      >
        {{ item.n }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { provincetype } from '@/types/home';
//props
const props = defineProps({
  title: {
    require: true,
    default: '标题',
  },

  list: {
    type: Object,
    default: () => ['语言', 'js', 'ts'],
  },
});

const emits = defineEmits(['sortClick']);

//-1:表示 是全部
let curIndex = ref<Number>(-1);
const itemClick = (index: number, item: provincetype = {}) => {
  //改变索引变颜色
  curIndex.value = index;

  //省、直辖市编号
  if (item.c) {
    let areaIndex = Object.keys(item.c)[0];

    item.areaCode = areaIndex;
    console.log(areaIndex, 'areaIndex');
  }

  //父组件 传递事件
  emits('sortClick', item);
};
</script>

<style scoped lang="scss"></style>
